<div class="gn-related-resources"
           data-ng-if="relationFound">
  <h2>{{::title}}</h2>

  <div class=""
       data-ng-repeat="(type, items) in relations track by $index"
       data-ng-if="type && type !== 'thumbnails'">
    <div data-ng-init="mainType = config.getType(r, type);"
         class="row list-group-item gn-related-item gn-related-{{type}} gn-relation-type-{{mainType}}"
         data-ng-repeat="r in items track by $index">
      <div class="col-xs-1 col-sm-1">
        <!-- OWS have their name overlaid over the globe icon -->
        <strong data-ng-if="(mainType === 'WMS') || (mainType === 'WMSSERVICE') || (mainType === 'WMTS') ||
                            (mainType === 'WMTSSERVICE') || (mainType === 'WFS') || (mainType === 'WCS')">
          <span class="fa-stack fa-1x">
            <i class="fa fa-globe fa-stack-2x" style="opacity: 0.55;"></i>
            <span class="fa fa-stack-1x">
              <strong style="font-size:10px;">{{mainType.replace('SERVICE', '')}}</strong>
            </span>
          </span>
        </strong>
        <strong data-ng-if="(mainType !== 'WMS') && (mainType !== 'WMSSERVICE') && (mainType !== 'WMTS') &&
                            (mainType !== 'WMTSSERVICE') && (mainType !== 'WFS') && (mainType !== 'WCS')">
          <i class="fa"
             data-ng-class="config.getClassIcon(mainType)"/>&nbsp;
        </strong>
      </div>
      <div data-ng-class="mainType === 'MDFCATS' ? 'col-xs-11' : 'col-xs-8 col-sm-8'">
        <!-- Always display title if available -->
        <h3 data-ng-if="::(r.title | gnLocalized: lang).length">{{::(r.title | gnLocalized: lang)}}</h3>
        <!-- Display description if available -->
        <p data-ng-if="(mainType === 'WMS' || mainType === 'WMSSERVICE' ||
                       mainType === 'WMTS' || mainType === 'WMTSSERVICE' ||
                       mainType === 'WCS' ||
                       mainType.indexOf('LINK') === 0 ||
                       mainType.indexOf('DEFAULT') === 0 ||
                       r.protocol === 'OGC:WFS') &&
                       r.locDescription.length > 0  &&
                      mainType !== 'LINK'">
          {{::r.locDescription | striptags | characters:150}}
        </p>
        <div data-ng-switch on="mainType">
          <div data-ng-switch-when="WMS">
            <p class="text-muted">
              <span data-translate=""
                    data-translate-values="{url:'{{r.url | gnLocalized: lang}}', layer:'{{(r.title | gnLocalized: lang).replace('\'', '\\\'')}}'}">
                wmsLinkDetails</span>
            </p>
          </div>
          <div data-ng-switch-when="WMTS">
            <p class="text-muted">
              <span data-translate=""
                    data-translate-values="{url:'{{r.url | gnLocalized: lang}}', layer:'{{(r.title | gnLocalized: lang).replace('\'', '\\\'')}}'}">
                wmtsLinkDetails</span>
            </p>
          </div>
          <div data-ng-switch-when="WMSSERVICE">
            <p class="text-muted">
              <span data-translate=""
                    data-translate-values="{url:'{{r.url | gnLocalized: lang}}'}">
                wmsServiceLinkDetails</span>
            </p>
          </div>
          <div data-ng-switch-when="WMTSSERVICE">
            <p class="text-muted">
              <span data-translate=""
                    data-translate-values="{url:'{{r.url | gnLocalized: lang}}'}">
                wmtsServiceLinkDetails</span>
            </p>
          </div>
          <div data-ng-switch-when="WFS">
            <p class="text-muted"
               data-ng-if="isLayerProtocol(r)">
              <span data-translate=""
                    data-translate-values="{url:'{{r.url | gnLocalized: lang}}', layer:'{{r.title | gnLocalized: lang}}'}">
                wfsLinkDetails</span>
            </p>
            <div data-ng-if="isLayerProtocol(r)"
                 data-gn-no-map-wfs-download=""
                 data-typename="{{r.title | gnLocalized: lang}}"
                 data-url="{{r.url | gnLocalized: lang}}">
            </div>

            <p class="text-muted"
               data-ng-if="!isLayerProtocol(r)">
              <span data-translate=""
                    data-translate-values="{url:'{{r.url | gnLocalized: lang}}'}">
                wfsServiceLinkDetails</span>
            </p>
            <div data-ng-if="!isLayerProtocol(r)"
                 data-gn-no-map-wfs-download=""
                 data-typename=""
                 data-url="{{r.url | gnLocalized: lang}}">
            </div>
          </div>

          <div data-ng-switch-when="TMS">
            <span data-translate=""
                  data-translate-values="{url:'{{r.url | gnLocalized: lang}}', layer:'{{r.title | gnLocalized: lang}}'}">
              tmsLinkDetails</span>
          </div>

          <div data-ng-switch-when="SOS">
            <span data-translate=""
                  data-translate-values="{url:'{{r.url | gnLocalized: lang}}', layer:'{{r.title | gnLocalized: lang}}'}">
              sosLinkDetails</span>
          </div>

          <div data-ng-switch-when="ESRI:REST">
            <span data-translate=""
                  data-translate-values="{url:'{{r.url | gnLocalized: lang}}', layer:'{{r.title | gnLocalized: lang}}'}">
              esriRestLinkDetails</span>
          </div>

          <div data-ng-switch-when="WCS">
            <p class="text-muted">
            <span data-translate=""
                  data-translate-values="{url:'{{r.url | gnLocalized: lang}}', layer:'{{r.title | gnLocalized: lang}}'}">
              wcsLinkDetails</span>
            </p>
          </div>

          <div data-ng-switch-when="ATOM">
            <p class="text-muted" data-translate=""
               data-translate-values="{url:'{{r.url | gnLocalized: lang}}', layer:'{{r.title | gnLocalized: lang}}'}">
              atomLinkDetails
            </p>
            <div
              data-gn-atom-download="r.title"
              data-layer-name="{{r.title | gnLocalized: lang}}"
              data-url="{{r.url | gnLocalized: lang}}"
              data-md="md">
            </div>
          </div>

          <div data-ng-switch-when="DB">
            <p class="text-muted">
            <span data-translate=""
                  data-translate-values="{url:'{{r.url | gnLocalized: lang}}', layer:'{{r.title | gnLocalized: lang}}'}">
              databaseLayerDetails</span>
            </p>
          </div>

          <div data-ng-switch-when="FILE">
            <p class="text-muted">
              <span data-translate=""
                    data-translate-values="{url:'{{r.url | gnLocalized: lang}}', name:'{{r.title | gnLocalized: lang}}'}">
                fileLayerDetails</span>
              <input class="form-control"
                     type="text"
                     onClick="this.setSelectionRange(0, this.value.length)"
                     value="{{::r.url | gnLocalized: lang}}"/>
            </p>
          </div>

          <div data-ng-switch-when="MDFCATS">
            <p data-translate="">technicalInformation</p>
            <div data-gn-attribute-table-renderer="r.featureType.attributeTable.element">
            </div>
          </div>

          <div data-ng-switch-default>
            <p class="text-muted"
               data-ng-if="mainType.indexOf('MD') == 0 && r.id">
              <span class="gn-related-description">
                {{ (r.description | gnLocalized: lang | striptags | words:35)}} <a data-ng-click="config.showMore(r, md)" href="">{{'more' |
                translate}}...</a>
              </span>
            </p>

            <p class="text-muted"
               data-ng-if="mainType.indexOf('MD') == -1">
              <span class="gn-related-description" data-ng-if="r.description">
                {{ (r.description | gnLocalized: lang | striptags)}}</a>
              </span>
              <span ng-bind-html="r.url | gnLocalized: lang | linky:'_blank'"></span>
            </p>
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-sm-3">
        <button type="button"
                class="btn btn-default btn-sm btn-block gn-btn-addtomap text-wrap"
                data-ng-show="hasAction(mainType)"
                data-ng-click="config.doAction(mainType, r, md)">

          <span class="visible-lg-*">
            {{::(config.getLabel(mainType, type)) | translate}}
          </span>
          <br/>
          <span class="visible-lg-*"
                data-ng-if="mainType == 'MDSIBLING' && r.associationType != ''">
            ({{::r.associationType | translate}}{{::(r.initiativeType != '' ? ' / ' + (r.initiativeType | translate) : '')}})
          </span>
        </button>

        <button type="button"
                class="btn btn-default btn-sm btn-block gn-btn-addtoexternal text-wrap"
                data-ng-if="externalViewerActionEnabled
                          && (mainType === 'WMS' || mainType === 'WMSSERVICE')"
                data-ng-click="externalViewerAction(mainType, r, md)"
                data-translate="">viewInExternalViewer</button>
      </div>

    </div>
  </div>
</div>
